import Header from "./../../components/Header";
import Panel from "./../../elements/Panel";
import FormItem from "./../../components/FormItem";
import FormGroup from "./../../components/FormGroup";
import InputGroup from "./../../components/InputGroup";
import Label from "./../../components/FormLabel";
import FormItemType from "./../../components/FormItemType";
import {fetch} from "../../actions";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";
import {URL, setTitle, md5Url} from "./../../libs/Url";
import {Lang, Fetch_} from "./../../libs/";
import {connect} from "react-redux";

const Profile = React.createClass({
    getInitialState(){
        const self = this;
        setTitle(Lang.title.class_profile);
        this.form = [
            {
                name: 'name',
                label: Lang.profile.name,
                value: '',
                placeholder: '',
                tips: '',
                type: FormItemType.TEXT_SHOW
            },
            {
                name: 'count',
                label: "班级人数",
                value: '0',
                placeholder: '',
                tips: '',
                type: FormItemType.TEXT_SHOW
            },
            {
                name: "teacher",
                label: "班主任",
                value: '',
                placeholder: '',
                tips: '',
                type: FormItemType.TEXT_SHOW
            },
            {
                name: 'declaration',
                label: Lang.profile.announce,
                value: '',
                placeholder: '',
                tips: '',
                onchange: function (index, content) {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    })
                }
            },
            {
                name: 'comment',
                label: Lang.profile.profile,
                value: '',
                placeholder: '',
                type: FormItemType.TEXT_AREA,
                tips: '',
                onchange: function (index, content) {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content.length ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    })
                }
            }
        ];
        return {
            classes: [],
            form: this.form
        }
    },
    componentDidMount(){
        const {dispatch} = this.props, self = this;
        dispatch(fetch({url: URL.CLASS_PROFILE_GET}));
        Promise.all([
            Fetch_(URL.Get_USER_CLASS),
            Fetch_(URL.CLASS_PROFILE_GET)
        ])
            .then(res=> {
                self.setState({
                    classes: res[0].list,
                    class_current:res[1]['classes']
                })
            })
            .catch(e=> {
                console.log(e);
            })
    },
    componentWillReceiveProps(nextProps){
        if (nextProps['user'] && !_.isEmpty(nextProps['user']['user'])
            && !_.isEmpty(nextProps['user']['user']['class'])) {
            let clas_ = nextProps['user']['user'];
            this.form[2].value = clas_.name;
            this.setState({form: this.form});
        }
        // let current = this.state.classes;
        // if (current.length > 0) {
        //     current = current[0];
        //     this.form[0].value = current['class'].name;
        //     this.form[1].value = current['class'].sutdentcount;
        //     this.form[3].value = current['class'].declaration;
        //     this.form[4].value = current['class'].comment;
        //     this.setState({form: this.form});
        // }
    },
    onSubmit(){
        const {dispatch} = this.props;
        const class_ = this.props.user.user['class'][0];
        const self = this;
        var form = {};
        self.state.form.forEach((item, index)=> {
            if (item.required && item.value.length == 0) {
                self.setState({
                    form: [
                        ...self.state.form.slice(0, index),
                        Object.assign({}, self.state.form[index], {
                            tips: Lang.profile.tips,
                        }),
                        ...self.state.form.slice(index + 1),
                    ]
                })
            } else {
                form[item.name] = item.value
            }
        });
        if (Object.keys(form).length == self.state.form.length) {
            form.classid = class_.classid;
            Fetch_(URL.CLASS_PROFILE_SAVE, {body: form})
                .then(data=> {
                    alert('成功!');
                })
                .catch(e=> {
                    console.log(e);
                    alert('失败!')
                });
            // dispatch(fetch(SUBJECT.CLASS_PROFILE, {url: URL.CLASS_PROFILE_SAVE, ...form, classid: class_.classid}));
        }
    },
    render(){
        const self = this;
        const {user} = this.props;
        const data = this.props[md5Url.CLASS_PROFILE_GET] || {};
        (!data.classes && (data.classes = {}));
        let class_ = data.classes || {};
        let class_1 = this.state.classes[0] || {};
        let current = class_1['class'] || {};
        var form = this.state.form;
        if (!_.isEmpty(current) && form.length > 0) {
            form[0].value = current.name;
            form[1].value = (this.state.class_current.sutdentcount || 0) + ' 人';
            form[3].value = form[3].value || current.declaration;
            form[4].value = form[4].value || current.comment;
        }
        return (
            <Panel>
                <Header>{Lang.menus.CLASS_INFO_PROFILE}</Header>
                <div className="form-horizontal">
                    {form.map((item, idex)=> {

                        return <FormItem
                            index={idex}
                            {...item}
                            key={idex}></FormItem>
                    })}
                    <FormGroup>
                        <Label></Label>
                        <InputGroup>
                            <button
                                onClick={self.onSubmit}
                                className="btn btn-success"
                                type="submit"> 保存
                            </button>
                        </InputGroup>
                    </FormGroup>
                </div>
            </Panel>
        )
    }
});
function select(state) {
    return {
        [md5Url.CLASS_PROFILE_GET]: state.fetchBySubject[md5Url.CLASS_PROFILE_GET],
        [PAGE_SUBJECT.CLASS_PROFILE]: state.pageBySubject[PAGE_SUBJECT.CLASS_PROFILE],
        user: state.user,
    }
}
export default connect(select)(Profile)